@page
@{ Layout = "_LayoutHome"; }

@section Styles{
    <style>
        body,html {
            padding: 0;
            margin: 0;
        }
    </style>
}
<div class="rounded-0 shadow p-3 bg-white sticky-top">
    <div class="fw-bolder text-center">
        {{ user.displayName }}
    </div>
</div>
<div class="p-5">
    <div class="mb-3">
        <el-card class="rounded-0 border-0" shadow="never">
            <div class="row g-5">
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4 border-end">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-database-check fs-2 text-success"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ user.pointsTotal }}</span>
                            </div>
                            <div>累计获得积分</div>
                        </div>
                    </div>
                </div>
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4 border-end">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-database-check fs-2 text-warning"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ user.pointsSurplusTotal }}</span>
                            </div>
                            <div>剩余积分</div>
                        </div>
                    </div>
                </div>
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4">
                    <button type="button" class="btn btn-lg btn-outline-primary border-0" v-on:click="btnGiftsClick"><i class="bi bi-gift-fill"></i> 积分商城 <i class="el-icon-right"></i></button>
                </div>
            </div>
        </el-card>
    </div>
    <div class="mb-3">
        <el-card class="rounded-0 border-0" shadow="never">
            <div class="row g-5">
                <div class="py-3 px-8 text-center col-xl-8 col-lg-8 col-md-8 col-8 border-end">
                    <apexchart type="radialBar" :options="passChartOptions" :series="passSeries" height="399"></apexchart>
                </div>
                <div class="py-3 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4">
                    <div class="d-flex align-items-center justify-content-between py-2">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-person-fill-check fs-2 text-success"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ examTotal }}</span>
                            </div>
                            <div>累计考试</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between border-top border-bottom py-3 my-5">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-person-check fs-2 text-primary"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ examMoniTotal }}</span>
                            </div>
                            <div>累计模拟</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between py-2">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-person-lines-fill fs-2 text-warning"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ practiceAnswerTmTotal }}</span>
                            </div>
                            <div>累计刷题</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    <div class="mb-3">
        <el-card class="rounded-0 border-0" shadow="never">
            <div class="row g-5">
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4 border-end">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-question-circle-fill fs-2 text-success"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ examQTotal }}</span>
                            </div>
                            <div>参与问卷</div>
                        </div>
                    </div>
                </div>
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4 border-end">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-person-fill-exclamation fs-2 text-primary"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ examAssTotal }}</span>
                            </div>
                            <div>参与测评</div>
                        </div>
                    </div>
                </div>
                <div class="py-5 px-8 text-center col-xl-4 col-lg-4 col-md-4 col-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="icon-shape icon-xl rounded-circle card-icon">
                            <i class="bi bi-bookmarks fs-2 text-warning"></i>
                        </div>
                        <div>
                            <div class="mb-2">
                                <span class="h2">{{ examCerTotal }}</span>
                            </div>
                            <div>获得证书</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    <div class="mb-3">
        <el-card class="rounded-0 border-0" shadow="never">
            <div class="row g-5">
                <div class="text-center col-xl-6 col-lg-6 col-md-6 col-6 border-end">
                    <div class="card rounded-0 border-0 shadow-none">
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <el-progress type="dashboard" :percentage="practiceAllPercent" color="#6600FF" :width="118" :stroke-width="12"></el-progress>
                                <div class="mt-n2">
                                    <small>刷题正确率</small>
                                </div>
                            </div>
                            <div class="p-3 bg-light w-100 rounded-pill mt-3">
                                <el-button type="success" plain class="w-100 p-4 rounded-pill" v-on:click="btnCreatePracticeClick('Create')">
                                    <div>
                                        <i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始
                                    </div>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center col-xl-4 col-lg-4 col-md-4 col-4 ps-8">
                    <div class="text-center py-2">
                        <div class="card rounded-0 border-0 shadow-none">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="pe-8">
                                        <el-progress type="circle" :percentage="practiceCollectPercent" color="#67C23A" :width="88" :stroke-width="8"></el-progress>
                                    </div>
                                    <div>
                                        <div class="p-2 bg-light w-100 rounded-3">
                                            <el-button type="primary" plain class="py-4 px-5 w-100 rounded-3" v-on:click="btnCreatePracticeClick('Collect')">
                                                <div>
                                                    <i class="bi bi-person-hearts me-2"></i>收藏练习
                                                </div>
                                                <div class="fs-6 fw-light mt-2">共 {{ practiceCollectTmTotal }} 道题</div>
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center border-top">
                        <div class="card rounded-0 border-0 shadow-none">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="pe-8">
                                        <el-progress type="circle" :percentage="practiceWrongPercent" color="#E6A23C" :width="88" :stroke-width="8"></el-progress>
                                    </div>
                                    <div>
                                        <div class="p-2 bg-light w-100 rounded-3">
                                            <el-button type="warning" plain class="py-4 px-5  w-100 rounded-3" v-on:click="btnCreatePracticeClick('Wrong')">
                                                <div>
                                                    <i class="bi bi-backspace-reverse me-2"></i>错题练习
                                                </div>
                                                <div class="fs-6 fw-light mt-2">共 {{ practiceWrongTmTotal }} 道题</div>
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    <div class="mb-3" v-if="systemCode==='Elearning'">
        <el-card class="rounded-0 border-0" shadow="never">
            <div class="row g-5">
                <div class="py-3 px-8 text-center col-xl-6 col-lg-6 col-md-6 col-6 border-end">
                    <div class="d-flex align-items-center justify-content-between py-2">
                        <div class="icon-shape icon-xl rounded-circle bg-success text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                            </svg>
                        </div>
                        <div class="text-end">
                            <div class="mb-2">
                                <span class="text-success h2">{{ studyPlanTotalOverCredit }}</span>
                            </div>
                            <div>累计获得学分</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between border-top pt-5 my-5">
                        <div class="icon-shape icon-xl rounded-circle bg-warning text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
                            </svg>
                        </div>
                        <div class="text-end">
                            <div class="mb-2">
                                <span class="text-warning h2">{{ studyPlanTotalCredit }}</span>
                            </div>
                            <div class="fw-normal">目标学分</div>
                        </div>
                    </div>
                </div>
                <div class="py-3 px-8 text-center col-xl-6 col-lg-6 col-md-6 col-6">
                    <div class="d-flex align-items-center justify-content-between py-2">
                        <div class="icon-shape icon-xl rounded-circle bg-warning text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
                                <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
                                <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
                            </svg>
                        </div>
                        <div class="text-end">
                            <div class="mb-2">
                                <span class="text-success h2">{{ totalOverCourse }}</span>
                                <span class="vr mx-2 text-gray-200"></span>
                                <span class="text-warning h2">{{ totalCourse }}</span>
                            </div>
                            <div class="fw-normal">完成课程</div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between border-top pt-5 my-5">
                        <div class="icon-shape icon-xl rounded-circle bg-primary text-white card-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
                                <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
                            </svg>
                        </div>
                        <div class="text-end">
                            <div class="mb-2">
                                <span class="text-success h2">{{ utils.formatDuration(totalDuration) }}</span>
                            </div>
                            <div class="fw-normal">学习时长</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</div>
<div class="mb-3 text-center">
    <small>没有更多了</small>
</div>
<div class="py-3"></div>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/dashboard.js" type="text/javascript"></script>
}